<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    1.HTML是解释型文本标记语言，不区分大小写
    2.
        2.1 html,head,title,meta,body,br,hr,p,div,ul,ol,h1-h6,a,img,&nbsp,span
        2.2 table tr,th,td
        2.3 form(action="",method='post') input type="text,password,radio,checkbox,submit,button,reset" <select> <option>
-->

<!--
    HTML 语言是解释型语言，不是编译型的，浏览器是容错的
    <br/> 表示换行
    <p> </p> 表示段落标签
    <ol> </ol> 有序列表
    start 表示从什么时候开始，type表示显示的类型，默认值为阿拉伯数字1
    <ul> 表示无序列表
    <u> </u> 下划线
    <i> </i> 斜体
    <sup> 上标
    <sub> 下标
    &lt;  <
    &gt;  >
    &le;  <=
    &ge;  >=

    a 表示超链接
        href 链接的地址
        target：
            _self 在本窗口打开
            _blank 在一个新窗口打开
            _parent 在父窗口打开
            _top 在顶层窗口打开

    div 层

    table 表格
        行   tr
        列   td
        表头列  th
        cellspacing:单元格填充
        cellpadding:

        rowspan : 行合并
        colspan : 列合并

    表单   form

-->
    Hello World!<br/>
    你好，世界！
    <p> 这是第一个段 </p>
    <p> 这是第二个段 </p>
    <!--<img src="D:\Java_study\JavaWeb\day1\HTML\imgs\1.jpg" alt="这里是一张图片"/>-->
    <ol>
        <li>扫地僧1</li>
        <li>扫地僧2</li>
        <li>扫地僧3</li>
    </ol>

    <ul>
        <li>111</li>
        <li>112</li>
        <li>113</li>
        <li>114</li>
        <li>116</li>
    </ul>

    水：H<sub>2</sub>O <br/>
    氧气：O<sup>2</sup> <br/>

    5 &lt; 10
    5 &gt; 1
    5 &le; 5
    5 &ge; 5

    <table border="1" width="600" cellspacing="0" cellpadding="4">
        <tr align="center">
            <th>姓名</th>
            <th>门派</th>
            <th>成名绝技</th>
            <th>内功值</th>
        </tr>
        <tr align="center">
            <td>乔峰</td>
            <td>丐帮</td>
            <td>降龙十八掌</td>
            <td> 50000</td>
        </tr>
        <tr align="center">
            <td>段誉</td>
            <td>大理</td>
            <td>凌波微步</td>
            <td>500</td>
        </tr>
    </table>
    <hr/>

    <table border="1" cellspacing="0" cellpadding="4" width="600">
        <tr>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr align="center">
            <td>苹果</td>
            <td rowspan="2">5</td>
            <td>20</td>
            <td>100</td>
            <td><img src="1.jpg" width="24" height="24" referrer="no-referrer"></td>
        </tr>
        <tr align="center">
            <td>菠萝</td>
            <td>15</td>
            <td>65</td>
            <td><img src="1.jpg" width="24" height="24" referrer="no-referrer"></td>
        </tr>
        <tr align="center">
            <td>橘子</td>
            <td>2</td>
            <td>15</td>
            <td>30</td>
            <td><img src="1.jpg" width="24" height="24" referrer="no-referrer"></td>
        </tr>
        <tr align="center">
            <td>总计</td>
            <td colspan="4">195</td>
        </tr>
    </table>

    <hr/>
    <form action="demo2.html" method="post">  <!-- action 发送的目的地  method: 一般都是 post  还有get  其中get方式不安全-->
        <!--
            input type="text" 表示文本框 其中name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
            input type="password" 表示密码框
            textarea 多行文本框 它的value值就是开始结束标签之间的内容
            checked="checked" 默认选中
            input type="radio" 表示单选按钮，需要注意的是，name属性值保持一致，这样才会有互斥的效果；可以通过checked属性设置默认选中的项
            input type="checkbox" 表示复选框，name属性值建议保持一致，这样将来我们服务器端获取值的是一个数组
            select 表示下拉列表。每一个选项是option，其value属性是发送给服务器的值，selected表示默认选中的项

            framset:

            iframe:
        -->
        昵称：<input type="text" name="nickname"/><br/>
        密码：<input type="password" name="pwd"/><br/>
        性别：<input type="radio" name="gender" value="male" checked/>男
              <input type="radio" name="gender" value="female"/>女<br/>
        爱好：<input type="checkbox" name="hobby" value="basketball" checked>篮球
             <input type="checkbox" name="hobby" value="sing">唱歌
             <input type="checkbox" name="hobby" value="dance">跳舞<br/>
        星座：<select name="star">
                <option value="1">白羊座</option>
                <option value="2">巨蟹座</option>
                <option value="3">魔蝎座</option>
                <option value="4" selected>射手座</option>
                <option value="5">天蝎座</option>
             </select><br/>
        备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
        <input type="submit" value="注  册"/>
        <input type="reset" value="重  置"/> <!--重置表示恢复到页面的默认状态-->
        <input type="button" value="普通按钮"/>
    </form>
</body>
</html>